<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/layout">
<title layout:fragment="title">用户管理</title>
<body>
<div class="main-content" layout:fragment="content">
    <div class="breadcrumbs" id="breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="/">首页</a>
            </li>
            <li><a href="/users/home">用户管理</a></li>
            <li class="active">用户权限</li>
        </ul>
    </div>
    <!-- .page-content -->
    <div class="page-content">
        <div class="page-header">
            <h1 th:text="用户权限设置"></h1>
        </div>

        <div class="col-xs-12">
            <a href="javascript:;" class="btn btn-primary btn-sm" id="save-btn">保存
                <i class="icon-save icon-on-right bigger-120"></i></a>
        </div>
        <br>
        <div class="col-xs-12">
            <div class="page-header">
                <h3 th:text="用户基本信息"></h3>
            </div>
            <form method="post" th:action="@{/users/save}" id="save-form" class="form-horizontal">
                <input type="hidden" name="id" id="userId" th:value="${user.id}">
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"> 用户名：<span class="red">*</span></label>
                    <div class="col-sm-9">
                        <input type="text" id="username" name="username" readonly placeholder="请输入用户名"
                               class="col-xs-10 col-sm-5" th:value="${user.username}">
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"> 姓名：</label>
                    <div class="col-sm-9">
                        <input type="text" id="realName" name="realName" readonly placeholder="请输入姓名"
                               class="col-xs-10 col-sm-5" th:value="${user.realName}">
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"> 手机号码：</label>
                    <div class="col-sm-9">
                        <input type="number" id="mobile" name="mobile" readonly placeholder="请输入手机号码"
                               class="col-xs-10 col-sm-5" th:value="${user.mobile}">
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"> 性别：</label>
                    <div class="col-sm-9">
                        <div class="radio inline">
                            <label>
                                <input name="gender" type="radio" class="ace" checked>
                                <span class="lbl" th:text="${user.gender == 1 ? '男' :'女'}"> </span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="space-4"></div>
            </form>
        </div>
        <div class="col-xs-12">
            <div class="page-header">
                <h3 th:text="用户权限信息"></h3>
            </div>
            <table class="table table-striped table-bordered table-hover dataTable">
                <thead>
                <tr>
                    <th style="text-align: center;width: 30%;">角色/资源</th>
                    <th style="text-align: center;width: 70%;">描述</th>
                </tr>
                </thead>
            </table>
            <table class="table table-striped table-bordered table-hover dataTable" th:each="role: ${roles}">
                <tbody>
                <tr>
                    <td style="padding-left: 30px;width: 30%;">
                        <div class="checkbox">
                            <label>
                                <input name="role" type="checkbox" th:attr="roleid=${role.id}" th:checked="${role.checked}" class="ace">
                                <span class="lbl" th:text="${role.name}"></span>
                            </label>
                            <a class="btn btn-minier view-res">查看资源</a>
                        </div>
                    </td>
                    <td th:text="${role.description}" style="vertical-align: middle;"></td>
                </tr>
                <tr th:each="res : ${role.resources}" class="hide">
                    <td style="padding-left: 68px;">
                        <i class="icon-ok bigger-120"></i>
                        <span th:text="${res.name}" ></span>
                    </td>
                    <td th:text="${res.description}"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script layout:fragment="script" th:src="@{/assets/js/user/role.js}"></script>
</body>
</html>